```svelte
<script lang="ts">
  import * as tagsInput from "@zag-js/tags-input"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(tagsInput.machine, {
    id,
    defaultValue: ["React", "Vue"],
  })
  const api = $derived(tagsInput.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  {#each api.value as value, index}
    <span {...api.getItemProps({ index, value })}>
      <div {...api.getItemPreviewProps({ index, value })}>
        <span>{value} </span>
        <button {...api.getItemDeleteTriggerProps({ index, value })}> &#x2715; </button>
      </div>
      <input {...api.getItemInputProps({ index, value })} />
    </span>
  {/each}
  <input placeholder="Add tag..." {...api.getInputProps()} />
</div>
```
